<template>
  <view class="article-item" :class="[mode, border ? 'border' : '']">
    <view class="thumb" :style="{ backgroundImage: `url(${thumb})` }"> </view>

    <view class="body">
      <view class="title">{{ title }}</view>

      <view class="bottom">
        <view class="tags" v-if="tags && mode">
          <view class="tag" v-for="(tag, tagIndex) in tags" :key="tagIndex">
            {{ tag.name || tag }}
          </view>
        </view>
        <template v-else>
          <view class="bd"> {{ read }}看过</view>
		  <view class="ft"  >
		    <view class="btn">
		    	去观看
		    </view>
		  </view>
        </template>
        <view class="ft"  >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { imgBaseUrlV2 } from "@/common/config";
export default {
  props: {
    mode: {
      type: String,
      default: "", // other
    },
    type: {
      type: [String, Number],
      default: "", // other
    },
    title: {
      type: String,
      default: "", // other
    },
    thumb: {
      type: String,
      default: "", // other
    },
    read: {
      type: Number,
      default: 0, // other
    },
    border: {
      default: false,
    },
    tags: {
      type: Array,
      default: null,
    },
    icons: {
      type: Array,
      default() {
        return [
          {
            label: 1,
            value: imgBaseUrlV2 + "xueyuan_tu.png",
          },
          {
            label: 2,
            value: imgBaseUrlV2 + "xueyuan_shipin.png",
          },
          {
            label: 3,
            value: imgBaseUrlV2 + "xueyuan_yinpin.png",
          },
        ];
      },
    },
  },
  computed: {
    getIcon() {
      let dataList = this.$getDictDataList("repositoryArticleType");
      let item = this.icons.find((i) => i.label == this.type);
      console.log(item, "?item");
      return item ? item.value : "";
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';
@import '~@/common/stylus/mixins';

.article-item {
  position: relative;
  width: 100%;
  flex: 1;

  &.border {
    >.body {
      border-bottom: 1rpx solid #D8D8D8;
    }
  }

  >.thumb {
    background-size: cover;
    height: 196rpx;
  }

  >.body {
    position: relative;
    display: block;
    width: 100%;
  }

  &.other {
    display: flex;
    padding-bottom: 12rpx;

    >.thumb {
      flex: 0 0 260rpx;
      height: 160rpx;
      background-size: cover;
      margin-right: 24rpx;
      margin-bottom: 12rpx;
    }

    >.body {
      flex: 1;
      padding-bottom: 12rpx;
      >.bottom {
        margin-top: 0rpx;
        padding-bottom: 0;

        >.ft {
          padding-top: 8rpx;
        }
      }

      >.title {
        padding: 0;
      }
    }

    .tags {
      // position: absolute;
      // width: 100%;
      flex: 1;
      left: 0;
      bottom: 12rpx;
      no-wrap();

      >.tag {
        display: inline-block;
        height: 40rpx;
        line-height: 40rpx;
        border: none;
        // background: #F5F8FC;
        background:  #3F5270;
        border-radius: 22rpx;
        min-width: 100rpx;
        font-size: 22rpx;
        // color: color-desc;
        color: color-white;
        margin-right: 10rpx;
        margin-top: 8rpx;
        text-align: center;
      }
    }
  }

  .title {
    no-wraps(2);
    width: 100%;
    font-size: 28rpx;
    line-height: 44rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #fff;
    text-align: justify;
    padding: 12rpx 20rpx 0;
    white-space: initial;
    height: 100rpx;
  }

  .bottom {
    display: flex;
    margin-top: 16rpx;
    padding-bottom: 10rpx;
    align-items: flex-start;

    >.bd {
      flex: 1;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #fff;
      padding: 0 20rpx 0;
    }

    >.ft {
      flex: 0 0 auto;
      padding: 0 10rpx 0;

      .icon {
        display: block;
        width: 40rpx;
        height: 40rpx;
      }

      >.btn {
        display: inline-block;
        height: 40rpx;
        line-height: 40rpx;
        border: none;
        // background: #F5F8FC;
        background: linear-gradient(180deg, #73B4FF 0%, #3F7DFF 100%);
        border-radius: 22rpx;
        min-width: 100rpx;
        font-size: 22rpx;
        // color: color-desc;
        color: color-white;
        margin-right: 10rpx;
        margin-top: 8rpx;
        text-align: center;
      }
    }
  }
}
</style>